<template>
	<view class="container">
		<!-- 顶部渐变导航栏 + 选项卡 -->
		<view class="nav-header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">我的优惠券</view>
				<view class="nav-right"></view>
			</view>
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">未使用</view>
				<view class="tab-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">已使用</view>
				<view class="tab-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">已过期</view>
			</view>
		</view>
		<!-- 内容区域：白色卡片容器包裹列表 -->
		<view class="content-view">
			<view class="list-card">
				<view class="coupon-scroll">
					<view class="coupon-item" v-for="(coupon, index) in filteredCoupons" :key="index"
						:class="getCouponClass(coupon)">
						<!-- 顶部：左侧说明 + 右侧金额 -->
						<view class="ticket-top">
							<view class="ticket-info">
								<view class="ticket-sub">{{ coupon.title }}</view>
								<view class="ticket-main">{{ coupon.condition }}</view>
							</view>
							<view class="ticket-price">
								<text class="currency">¥</text>
								<text class="amount">{{ coupon.value }}</text>
							</view>
						</view>

						<!-- 中间虚线分割 -->
						<view class="ticket-sep"></view>

						<!-- 底部：左侧有效期 + 右侧操作文案 -->
						<view class="ticket-bottom">
							<view class="ticket-date">有效期至：{{ coupon.expiryDate }}</view>
							<view class="action-text">{{ getButtonText(coupon) }}<text class="arrow">›</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const goBack = () => {
		uni.navigateBack();
	};

	const activeTab = ref(0);

	// 示例数据
	const coupons = ref([{
			value: 20,
			type: '满200元可用',
			title: '仅限于XX加油站使用',
			condition: '满200元可用',
			expiryDate: '2023.05.11',
			status: 'tobeused'
		},
		{
			value: 20,
			type: '满200元可用',
			title: '仅限于XX加油站使用',
			condition: '满200元可用',
			expiryDate: '2023.05.11',
			status: 'tobeused'
		},
		{
			value: 20,
			type: '满200元可用',
			title: '仅限于XX加油站使用',
			condition: '满200元可用',
			expiryDate: '2023.05.11',
			status: 'used'
		},
		{
			value: 20,
			type: '满200元可用',
			title: '仅限于XX加油站使用',
			condition: '满200元可用',
			expiryDate: '2023.05.11',
			status: 'expired'
		}
	]);

	const changeTab = (index) => {
		activeTab.value = index;
	};

	const filteredCoupons = computed(() => {
		const statusMap = ['tobeused', 'used', 'expired'];
		const currentStatus = statusMap[activeTab.value];
		return coupons.value.filter(c => c.status === currentStatus);
	});

	const getCouponClass = (coupon) => ({
		tobeused: coupon.status === 'tobeused',
		used: coupon.status === 'used',
		expired: coupon.status === 'expired'
	});

	const getButtonText = (coupon) => ({
		tobeused: '去使用',
		used: '已使用',
		expired: '已过期'
	})[coupon.status];
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		position: relative;
	}

	/* 顶部导航栏 - 参考couponCenter.vue样式 */
	.nav-header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		/* 设置底部内边距来扩展背景高度 */
		padding-bottom: calc(30rpx + 250rpx);
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
		position: relative;
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	.nav-right {
		width: 80rpx;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		padding: 16rpx 0 24rpx;
		position: relative;
	}

	.tab-item {
		font-size: 30rpx;
		color: #dfefff;
		padding: 10rpx 12rpx;
		z-index: 1;
	}

	.tab-item.active {
		color: #ffffff;
		border-bottom: 4rpx solid #ffffff;
	}

	/* 内容卡片容器 */
	.content-view {
		padding: 0 30rpx 20rpx 30rpx;
		/* 使用负边距向上移动，覆盖导航栏背景 */
		margin-top: -250rpx;
		overflow: visible;
		display: flex;
		flex-direction: column;
		background: transparent;
	}

	.list-card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.coupon-scroll {
		max-height: 1200rpx;
		overflow-y: auto;
	}

	/* 卡片样式 */
	.coupon-item {
		position: relative;
		margin: 20rpx 30rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		color: #fff;
		background-image: url('/static/image/myCoupon/椭圆 3 拷贝.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	/* 已使用：浅橙效果（叠加白色半透明层） */
	.coupon-item.used::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.45);
		pointer-events: none;
	}

	/* 已过期：灰度 */
	.coupon-item.expired {
		filter: grayscale(100%) brightness(95%);
	}

	/* 顶部结构 */
	.ticket-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ticket-info {
		display: flex;
		flex-direction: column;
	}

	.ticket-sub {
		font-size: 24rpx;
		opacity: 0.95;
	}

	.ticket-main {
		font-size: 36rpx;
		font-weight: 700;
		margin-top: 8rpx;
	}

	.ticket-price {
		display: flex;
		align-items: baseline;
	}

	.ticket-price .currency {
		font-size: 28rpx;
		margin-right: 6rpx;
	}

	.ticket-price .amount {
		font-size: 56rpx;
		font-weight: 700;
	}

	/* 中间虚线 */
	.ticket-sep {
		height: 0;
		border-bottom: 2rpx dashed rgba(255, 255, 255, 0.8);
		margin: 22rpx 0;
	}

	/* 底部结构 */
	.ticket-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ticket-date {
		font-size: 22rpx;
	}

	.action-text {
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.action-text .arrow {
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	/* 状态对操作文案的颜色影响 */
	.coupon-item.used .action-text,
	.coupon-item.expired .action-text {
		color: #eaeaea;
	}
</style>